<template>
  <div class="app-container">
    <ele-form
      :inline="true"
      submitBtnText="查询"
      :formDesc="formDesc"
      v-model="listQuery"
      :request-fn="fetchData"
    ></ele-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      @sort-change="sortFetchData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="昵称" prop="userName" align="center" />
      <el-table-column class-name="status-col" label="头像" width="110" align="center">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.userHead"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="登录名" prop="userLogin" align="center" />
      <el-table-column label="手机号" prop="userPhone" align="center" />
      <el-table-column label="角色" prop="userRoles" align="center" />
      <el-table-column label="部门" prop="userDeptId" align="center" />
      <el-table-column label="注册时间" prop="createTime" align="center" sortable="custom" />
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-popconfirm
            @onConfirm="enable(scope.$index,scope.row)"
            :title="scope.row.enable?'是否要停用该用户？':'是否要启用该用户？'"
          >
            <el-switch
              :value="scope.row.userEnable"
              active-color="#13ce66"
              inactive-color="#ff4949"
              slot="reference"
            ></el-switch>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot="header">
          <el-popover placement="right" width="400">
            <Add @request-success="fetchData"></Add>
            <el-button type="primary" slot="reference" icon="el-icon-add">新增</el-button>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <el-popover placement="right" width="700" trigger="click" @after-enter="see(scope)">
            <See :ref="'see'+scope.$index"></See>
            <el-button type="text" slot="reference">查看</el-button>
          </el-popover>

          <el-dropdown @command="(command)=>{handleEditCommand(scope.$index,command)}">
            <span class="el-dropdown-link">
              编辑
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="allocationRole">分配角色</el-dropdown-item>
              <el-popover placement="top" width="300" trigger="click">
                <DeptSee @select="item=>{allocationDept(item,scope.row.userId)}"></DeptSee>
                <el-dropdown-item command="allocationDept" slot="reference">分配部门</el-dropdown-item>
              </el-popover>
              <el-dropdown-item command="resetPwd">重置密码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
    <AllocationRole ref="allocationRole" @closed="fetchData()"></AllocationRole>
  </div>
</template>

<script>
import { getList, enable, resetPwd, allocationDept } from "@/api/user";
import { Add, See, AllocationRole } from "./components";
import Pagination from "@/components/Pagination";
import DeptSee from "@/components/DeptSee";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      allocationRole: false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      formDesc: {
        userName: {
          label: "昵称",
          type: "input",
          layout: 5
        },
        phone: {
          label: "手机号",
          type: "input",
          layout: 5
        }
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    /**
     * 查询shuju
     */
    fetchData() {
      this.listLoading = true;
      getList(this.listQuery)
        .then(response => {
          this.list = response.data;
          this.total = response.count;
          this.listLoading = false;
        })
        .catch(error => {
          this.listLoading = false;
        });
    },
    /**
     * 查看用户
     */
    see(scope) {
      this.$refs["see" + scope.$index].see(scope.row.userId);
    },
    /**
     * 分配部门
     */
    allocationDept(item, userId) {
      this.$confirm("是否分配该用户所属部门为：" + item.value, "提示", {
        type: "warning"
      }).then(() => {
        allocationDept(userId, item.key).then(res => {
          this.fetchData();
        });
      });
    },
    /**
     * 排序
     * @param column table列排序值
     */
    sortFetchData(column) {
      this.listQuery.order = column.order ? column.prop : null;
      this.listQuery.orderBy = column.order !== "descending";
      this.fetchData();
    },
    /**
     * 用户停用启用
     * @param index 数据下标
     * @param scope
     */
    enable(index, scope) {
      if (this.listLoading) {
        return;
      }
      this.listLoading = true;
      let data = {
        userId: scope.userId,
        enable: !scope.userEnable
      };
      enable(data)
        .then(response => {
          this.listLoading = false;
          this.list[index].userEnable = data.enable;
        })
        .catch(error => {
          this.listLoading = false;
        });
    },
    /**
     * 编辑命令
     * @param 数据下标
     * @param command 编辑菜单command值
     */
    handleEditCommand(index, command) {
      var data = this.list[index];
      switch (command) {
        case "resetPwd":
          this.$confirm("是否重置该用户密码，该操作不可逆?", "提示", {
            type: "warning"
          }).then(() => {
            if (this.listLoading) return;
            this.listLoading = true;
            resetPwd({ userId: data.userId })
              .then(res => {
                this.listLoading = false;
                this.$alert(res.msg, "新密码-请牢记");
              })
              .catch(res => {
                this.listLoading = false;
              });
          });
          break;
        case "allocationRole":
          this.$refs.allocationRole.open(data.userId);
          break;
      }
    }
  },
  components: {
    Add,
    Pagination,
    See,
    DeptSee,
    AllocationRole
  }
};
</script>
